<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<div id="root"></div>

<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel-min.js"></script>

<script type="text/babel">
  class App extends React.Component {

    constructor() {
      super();                
      this.state = {
        counter: 0
      }
    }
    //传递浏览器event参数
    btnClick(event) {
      console.log(event);
      console.log(this);
      console.log(name);
    }
    //传递额外的参数
    btnClick2(name, age, event) {
      console.log("btnClick2", name, age, event);
    }
    render() {
      return (
        <div>
          {/* event参数的传递 */}
          {/* react在回调时，react内部会将浏览器的event转发过来 */}
          <button onClick={this.btnClick}>按钮1</button>
          <button onClick={this.btnClick.bind(this)}>按钮2</button>
          {/* 使用箭头函数时，react没办法转发event, 需要我们手动进行转发，将react转发过来的event再转发给实际调用函数 */}
          <button onClick={(event) => this.btnClick(event)}>按钮3</button>
          <br/>
          {/* bind传递参数存在缺陷, 因为会默认传递一个event, 而event会默认作为最后一个参数传递, 顺序容易出错！*/}
          <button onClick={this.btnClick2.bind(this, "张三", 18)}>test1</button>
          {/* 使用箭头函数传递参数，参数顺序明确、清晰、可控， 推荐！*/}
          <button onClick={(event) => this.btnClick2(event, "李四", 18)}>test2</button>
        </div>
      )
    }
  }

  const root = ReactDOM.createRoot(document.querySelector("#root"))
  root.render(<App/>)

</script>

</body>
</html>
